<template>
  <el-form
      ref="loginForm"
      :rules="loginRules"
      :model="loginForm"
      class="login-form"
      status-icon
      label-width="0"
  >
    <el-form-item prop="username">
      <el-input
          v-model="loginForm.username"
          size="small"
          auto-complete="off"
          placeholder="请输入登录账号"
          @keyup.enter.native="handleLogin"
      >
        <!--        <i slot="prefix" class="icon-yonghuming" />-->
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
          :type="passwordType"
          v-model="loginForm.password"
          size="small"
          auto-complete="off"
          placeholder="请输入密码"
          @keyup.enter.native="handleLogin"
      >
        <i slot="suffix" class="icon-yanjing1" v-if="eye" @click="showPassword"/>
        <i slot="suffix" class="icon-huabanfuben" v-else @click="showPassword"></i>
      </el-input>
    </el-form-item>
    <el-form-item prop="code">
      <Verify
          @success="verifySuccess"
          :mode="'pop'"
          :captchaType="'blockPuzzle'"
          :imgSize="{ width: '330px', height: '155px' }"
          ref="verify"
      />
    </el-form-item>
    <el-form-item>
      <el-button
          type="primary"
          size="small"
          class="login-submit"
          @click.native.prevent="handleLogin"
      >安全登陆</el-button>
    </el-form-item>
<!--    <router-link :to="{path:'/reset'}" class="forget">忘记密码</router-link>-->
  </el-form>
</template>

<script>
import { randomLenNum } from "@/util/util";
import { mapGetters } from "vuex";
import { getCode } from "@/api/code";
import Verify from "@/components/verifition/Verify";
import {setStore} from "@/util/store";
export default {
  name: "Userlogin",
  components: {
    Verify,
  },
  data() {
    return {
      socialForm: {
        code: "",
        state: "",
      },
      loginForm: {
        username: "",
        password: "",
        code: "",
        randomStr: "blockPuzzle",
      },
      eye:false,
      checked: false,
      code: {
        src: undefined,
        len: 4,
      },
      loginRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: "密码长度最少为6位", trigger: "blur" },
        ],
      },
      passwordType: "password",
    };
  },
  computed: {
    ...mapGetters(["tagWel"]),
  },
  created() {
    setStore({ name: 'tenantId', content: this.$route.query.tenantId })
  },
  methods: {
    showPassword() {
      // this.passwordType == "" ? (this.passwordType = "password") : (this.passwordType = "");
      var me = this;
      if(me.eye){
        me.eye = false
        me.passwordType = "password"
      }else{
        me.eye = true
        me.passwordType = ""
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.$refs.verify.show();
        }
      });
    },
    verifySuccess(params) {
      this.loginForm.code = params.captchaVerification;
      // this.loginForm.tenantId = this.$route.query.tenantId
      // console.log(this.loginForm)
      // debugger
      this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
        this.$router.push({ path: this.tagWel.value,});
      });
      console.log(this.$route)
    },
  },
};
</script>

<style>
.forget{
  color:#03BB7A;
  float: right;
  font-size: 12px;
  margin-top: 10px;
}
.login-form .el-input input{
  padding-bottom: 0!important;
}
</style>
